Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | ---
import { getCollection } from 'astro:content';
import Layout from '../../../layouts/Layout.astro';
import Breadcrumb from '../../../components/Breadcrumb.astro';
import Card from '../../../components/Card/index.tsx';
import Sidebar from '../../../components/Sidebar/index.tsx';
import config from '../../../config/index.json';
export async function getStaticPaths() {
const allPosts = await getCollection('blog');
const sorted = allPosts.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);
const yearMonths = new Set<string>();
allPosts.forEach((post) => {
const d = new Date(post.data.date);
const year = d.getFullYear().toString();
const month = String(d.getMonth() + 1).padStart(2, '0');
yearMonths.add(`${year}/${month}`);
});
return Array.from(yearMonths).map((ym) => {
const [year, month] = ym.split('/');
return {
params: { year, month },
props: {
year,
month,
posts: sorted.filter((p) => {
const d = new Date(p.data.date);
const y = d.getFullYear().toString();
const m = String(d.getMonth() + 1).padStart(2, '0');
return y === year && m === month;
}),
allPosts: sorted,
},
};
});
}
const { year, month, posts, allPosts } = Astro.props;
const title = `${year}年${month}月の記事 (${posts.length}件)`;
const latestPosts = allPosts.slice(0, 6).map((p) => ({
title: p.data.title,
slug: p.slug,
date: p.data.date.toISOString(),
}));
const allPostsForSidebar = allPosts.map((p) => ({
date: p.data.date.toISOString(),
tags: p.data.tags || [],
}));
---
<Layout
title={title}
description={title}
ogpPath={`/og/${year}/${month}.png`}
canonicalUrl={`${config.siteUrl}/${year}/${month}/`}
noindex={true}
>
<div class="container">
<div class="row">
<Sidebar
client:load
latestPosts={latestPosts}
allPosts={allPostsForSidebar}
totalCount={allPosts.length}
/>
<div class="col order-2">
<Breadcrumb year={year} month={month} title={`${month}月`} />
<div class="col-12" style="font-size:1.5rem; font-weight:bold; margin-bottom:1rem;">
{title}
</div>
{posts.map((post, index) => {
const url = post.slug;
return (
<Card
client:load
title={post.data.title}
date={post.data.date.toISOString()}
url={`/${url}/`}
headerImage={post.data.headerImage}
description={post.data.description}
tags={post.data.tags || []}
index={index}
/>
);
})}
</div>
<div class="col-xl-2 col-lg-1 order-3"></div>
</div>
</div>
</Layout>
|